<template>
  <div class="container5">
    <div class="header4">
      <h1>已选择 {{ selectedTags.length }} 个标签</h1>
    </div>

    <transition-group name="flip-list" tag="div" class="tag-container">
      <div
          v-for="tag in tags"
          :key="tag.id"
          class="tag"
          :class="{ selected: tag.selected }"
          @click="toggleTag(tag)"
          @mousemove="handleHover($event, tag)"
      >
        <span class="text">{{ tag.name }}</span>
        <div class="highlight"></div>
        <transition name="icon">
          <span v-if="tag.selected" class="check-icon">✓</span>
        </transition>
      </div>
    </transition-group>

    <button class="confirm-btn" @click="confirmSelection">
      确认选择
      <div class="hover-effect"></div>
    </button>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import {showFailToast, showToast} from "vant";
import {updateUserInfo} from "../api/user.ts";
import router from "@/router/index.ts";


import {useRoute} from "vue-router";
import {userStore} from "@/store/userStore.ts";

const  user = userStore();

const route = useRoute();
const editkey = ref(route.query.editkey);
const editvalue = ref(route.query.editvalue);

const id = ref(user.userinfo.id);

const tags = ref([
  {id: 1, name: '竞赛组队', selected: false},
  {id: 2, name: '找工作', selected: false},
  {id: 3, name: '图书馆搭子', selected: false},
  {id: 4, name: '实验室伙伴', selected: false},
  {id: 5, name: '考研大军', selected: false},
  {id: 6, name: '考公小组', selected: false},
  {id: 7, name: '编程大佬', selected: false},
  {id: 8, name: '夜跑搭子', selected: false},
  {id: 9, name: '健身房伙伴', selected: false},
  {id: 10, name: '羽毛球王者', selected: false},
  {id: 11, name: '骑行小队', selected: false},
  {id: 12, name: '瑜伽冥想', selected: false},
  {id: 13, name: '街舞社', selected: false},
  {id: 14, name: '绘画交流', selected: false},
  {id: 15, name: '吉他弹唱', selected: false},
  {id: 16, name: '夜宵搭子', selected: false},
  {id: 17, name: '校园代取快递', selected: false},
  {id: 18, name: '二手闲置交易', selected: false},
  {id: 19, name: '树洞倾听者', selected: false},
  {id: 20, name: '实习信息共享', selected: false},
  {id: 21, name: '社牛本牛', selected: false},
  {id: 22, name: '搞笑担当', selected: false},
  {id: 23, name: '夜猫子', selected: false},
  {id: 24, name: '理性分析派', selected: false},

])
const selectedTags = ref([])

const toggleTag = (tag) => {
  if (selectedTags.value.length >= 4 && !tag.selected){
    showFailToast("最多选择4个标签")
    return;
  }
  tag.selected = !tag.selected
  selectedTags.value = tags.value.filter(t => t.selected)
}

const handleHover = (e, tag) => {
  const rect = e.currentTarget.getBoundingClientRect()
  const x = e.clientX - rect.left
  const y = e.clientY - rect.top
  e.currentTarget.style.setProperty('--x', `${x}px`)
  e.currentTarget.style.setProperty('--y', `${y}px`)
}

const confirmSelection = () => {

  if (selectedTags.value.length > 4) {
    showFailToast("最多选择4个标签")
    return;
  }
  if (selectedTags.value.length < 1) {
    showFailToast("请至少选择一个标签")
    return;
  }
  const tags = selectedTags.value.map(tag => tag.name)
  console.log(tags)
  editvalue.value = JSON.stringify(tags)
  console.log('已选择标签:', selectedTags.value)
  updateUserInfo({
    id: id.value,
    tags: editvalue.value
  })
      .then((res) => {
        if (res.data.data) {
          showToast({
            message: "修改成功",
            icon: 'success',
          });
          router.back();
        } else {
          showFailToast(res.data.description);
        }
      }).catch((err) => {
  })
}
onMounted(() => {
  console.log(editvalue.value)
  if(editvalue.value == null || editvalue.value == ''){
    return
  }
  editvalue.value.forEach(value => {
    tags.value.forEach(tag => {
      if (tag.name === value) {
        tag.selected = true
        selectedTags.value.push(tag.name)
      }
    })
  })
  console.log(selectedTags.value)



})

</script>

<style scoped lang="scss">
.container5 {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 20px;

}

.header4 {
  text-align: center;
  margin-bottom: 2rem;

  h1 {
    color: #2c3e50;
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }

}

.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.tag {
  position: relative;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;

  &:hover {
    transform: translateY(-3px);
  }

  .highlight {
    position: absolute;
    background: radial-gradient(circle at var(--x) var(--y),
        rgba(100, 200, 255, 0.3) 0%,
        transparent 80%);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
  }

  &:hover .highlight {
    opacity: 1;
  }

  &.selected {
    background: linear-gradient(135deg, #6B48FF, #00A3FF);
    color: white;
    transform: scale(1.05);

    .text {
      margin-right: 20px;
    }
  }
}

.check-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.icon-enter-active,
.icon-leave-active {
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.icon-enter-from,
.icon-leave-to {
  opacity: 0;
  transform: translateX(20px) translateY(-50%);
}

.flip-list-move {
  transition: transform 0.6s ease;
}

.confirm-btn {
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 15px 40px;
  background: linear-gradient(135deg, #6B48FF, #00A3FF);
  border: none;
  border-radius: 30px;
  color: white;
  font-size: 1.1rem;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.3s ease;

  .hover-effect {
    position: absolute;
    background: rgba(255, 255, 255, 0.2);
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    transition: left 0.4s ease;
  }

  &:hover {
    transform: scale(1.05);

    .hover-effect {
      left: 100%;
    }
  }
}

@media (max-width: 768px) {
  .container {
    margin: 1rem;
    padding: 1rem;
  }
  .tag {
    padding: 10px 20px;
  }
}
</style>